<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>csslayout02</title>
		<link type="text/css" href="css/normalize.css" rel="stylesheet" />
		<link type="text/css" href="css/csslayout02.css" rel="stylesheet" />
		<!--[if lt IE 9]>
			<script src="js/html5/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>
		<header>
			<div id="logo">				
			</div>
			<div id="qmenu">
				<ul>
					<li>회원정보</li>
					<li>로그인</li>
					<li>회원가입</li>
				</ul>
			</div>
			<div id="findbox">			
				<input type="text" name="key"/>
				<button type="button" onclick="go2find()">검색</button>
			</div>			
		</header>
		<nav>
			<ul>
				<li>프로젝트개요</li>
				<li>공지사항</li>
				<li>게시판</li>
				<li>자료실</li>
				<li>갤러리</li>
				<li>커뮤니티</li>
				<li>쇼핑몰</li>
				<li>관리자</li>
			</ul>
		</nav>
		
		<div id="floatad">
			add free
		</div>
		
		<div id="contents">
			<aside>
				<div id="login">
					<ul id="logintitle">
						<li>회원가입</li>
						<li>아이디 찾기</li>
						<li>비밀번호 찾기</li>
					</ul>
					<form name="frmlogin" action="" method="post" class="clearme">						
						<span>보안접속 ON</span>
						<input type="checkbox" name="auto" id="auto" /><label for="auto">자동로그인</label>
						<input type="text" name="uid" id="uid" />
						<input type="password" name="pwd" id="pwd" />
						<button type="submit" name="lbtn" id="lbtn">로그인</button>						
					</form>
				</div>
				<div id="notice">
					<h3>공지사항</h3>
					<ul>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용</li>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용</li>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용</li>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용</li>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용</li>
					</ul>
				</div>
				<div id="new">
					<h3>새로 작성된 글</h3>
					<ul>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용</li>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용</li>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용</li>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용</li>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용/li>
					</ul>
				</div>
				<div id="newcoment">
					<h3>새로 작성된 댓글</h3>
					<ul>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용</li>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용</li>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용</li>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용</li>
						<li>▷ 수지 사진만 업로드 허용 수지 사진만 업로드 허용</li>
					</ul>
				</div>
				<div id="sbanner">
					수지 광고만 허용
				</div>
			</aside>
			<section>
				<div id="sect01">
					<div id="text">
						<h1>Hello, World!!</h1>
						<div id="newarticle">
							<p>
							Bootstrap UI Framework, Spring Framwork, spring MVC, Spring Web Flow,
							Hibernate, EL, JSTL, JSPX, Apache Tiles 등을 이용해서 제작한 프로젝트 사이트 입니다.<br />
							Servlet 3.x, MyBatis 3.x, Struts 2.x, Sitemesh 3.x등을 이용해서 프로젝트를 완성해 보세요.<br />
							Subversion, Git, Ant, Maven, Mylyn, TRAC등을 이용해서 프로젝트를 관리, 배포하고, 버그 추적도 해보세요.
							</p>
						</div>
					</div>
					<div id="img">
					</div>
				</div>
				<div class="board">
					<div id="newinfo">
						<h3>최신정보</h3>
						<ul>
							<li>▷ "애플-차이나모바일, 아이폰5C 때문에 재협상"</li>
							<li>▷ 아이폰 사고 수지 만나볼까?</li>
							<li>▷ '네이버키친' 서비스 종료..네티즌들 "아쉽다"</li>
							<li>▷ '아이패드 미니' 써보니, 42만원 가격</li>
							<li>▷ 끝없는 추락 블랙베리, 폭스콘 손잡고 회생?</li>
							<li>▷ SBS에 이어 MBC까지..일베 사고, 실수일까?</li>
							<li>▷ IBM, 데이터 전송 전문기업 '아스페라' 인수</li>
						</ul>
					</div>
					<div id="used">
						<h3>사용기 / 설치기</h3>
						<ul>
							<li>▷ 구뉴패드 3개월 사용기</li>
							<li>▷ 옵티머스 G2 일주일 사용기</li>
							<li>▷ 아이폰 5S 개봉기</li>
							<li>▷ 아이폰 5C 개봉기</li>
							<li>▷ 아이패드 미니 개봉기</li>
							<li>▷ 쿼드비트2 사용기</li>
							<li>▷ 옵티머스 G pro, 놀라운 G</li>
						</ul>
					</div>
				</div>
				<div id="gallery" class="clearme">
					<h3>이미지 갤러리</h3>
					<ul>
						<li><div class="img"> </div><span>수지</span></li>
						<li><div class="img"> </div><span>수지</span></li>
						<li><div class="img"> </div><span>수지</span></li>
						<li><div class="img"> </div><span>수지</span></li>
						<li><div class="img"> </div><span>수지</span></li>
						<li><div class="img"> </div><span>수지</span></li>
						<li><div class="img"> </div><span>수지</span></li>
						<li><div class="img"> </div><span>수지</span></li>
						<li><div class="img"> </div><span>수지</span></li>
						<li><div class="img"> </div><span>수지</span></li>
					</ul>
				</div>
				<div class="board">
					<div id="pds">
						<h3>자료실</h3>
						<ul>
							<li>▷ 청와대 해킹 툴 v2.04 beta</li>
							<li>▷ 아이폰 사고 수지 만나볼까?</li>
							<li>▷ '네이버키친' 서비스 종료..네티즌들 "아쉽다"</li>
							<li>▷ '아이패드 미니' 써보니, 42만원 가격</li>
							<li>▷ 끝없는 추락 블랙베리, 폭스콘 손잡고 회생?</li>
							<li>▷ SBS에 이어 MBC까지..일베 사고, 실수일까?</li>
							<li>▷ IBM, 데이터 전송 전문기업 '아스페라' 인수</li>
						</ul>
					</div>
					<div id="qna">
						<h3>질문 / 답변</h3>
						<ul>
							<li>▷ 왜죠?</li>
							<li>▷ 왜 때문이죠?</li>
							<li>▷ 무엇이 왜 때문이죠?</li>
							<li>▷ 정말이지 왜 때문이죠?</li>
							<li>▷ 어떡하죠, 내 심장이 고장 났나봐</li>
							<li>▷ 언제까지 이러고 살텐가</li>-
							<li>▷ 옵티머스 G pro, 놀라운 G</li>
						</ul>
					</div>
				</div>
				<div class="board">
					<div id="blahblah">
						<h3>재잘재잘</h3>
						<ul>
							<li>▷ "애플-차이나모바일, 아이폰5C 때문에 재협상"</li>
							<li>▷ 아이폰 사고 수지 만나볼까?</li>
							<li>▷ '네이버키친' 서비스 종료..네티즌들 "아쉽다"</li>
							<li>▷ '아이패드 미니' 써보니, 42만원 가격</li>
							<li>▷  끝없는 추락 블랙베리, 폭스콘 손잡고 회생?</li>
							<li>▷ SBS에 이어 MBC까지..일베 사고, 실수일까?</li>
							<li>▷ IBM, 데이터 전송 전문기업 '아스페라' 인수</li>
						</ul>
					</div>
					<div id="buy">
						<h3>알뜰구매</h3>
						<ul>
							<li>▷ 구뉴패드 3개월 사용기</li>
							<li>▷ 옵티머스 G2 일주일 사용기</li>
							<li>▷ 아이폰 5S 개봉기</li>
							<li>▷ 아이폰 5C 개봉기</li>
							<li>▷ 아이패드 미니 개봉기</li>
							<li>▷ 쿼드비트2 사용기</li>
							<li>▷ 옵티머스 G pro, 놀라운 G</li>
						</ul>
					</div>
				</div>
			</section>
		</div>
		
		<nav class="clearme">
			<ul class="navsize">
				<li>이용약관</li>
				<li>개인정보보호방침</li>
				<li>이메일무단수집거부</li>
				<li>고객지원</li>
				<li>권리침해신고</li>
				<li>광고문의</li>
			</ul>
		</nav>		
		<footer>		
			<div id="flogo">
			</div>
			<div id="copy">
				<h5>Copyright &copy; 2013 JINn. All Rights Reserved. Designed by XHTML5, CSS3.</h5>
				<h5>I Infinite Loop, Cupertino,m CA 95014. 개인정보 관리책임자 : 채희원 chwon@chwwon.com</h5>
			</div>
		</footer>
		
		<script type="text/javascript">
			function go2find(){
				alert(" 지금은 사용할 수 없습니다. 으잌ㅋㅋㅋ ");
			}
		</script>
			
	</body>	
</html>
